<template>
 <div>
     <h2>查看详情</h2>
     <table>
         <tr>
             <td>书籍名称</td>
         </tr>
         <tr v-for='i in books'>
             <td>{{i.book_name}}</td>
         </tr>
     </table>
          <button v-if="previous" @click="pagx(p-1)">上一页</button>
          <button v-for="i in page" @click="pagx(i)">{{i}}</button>
          <button v-if="next" @click="pagx(p+1)">下一页</button>
 </div>
</template>

<script>
 export default {
   data () {
     return {
         books:[],
         id:0,
         previous:false,
         next:false,
         page:[],
         p:1
     }
   },
   mounted() {
       this.id=this.$route.query.id;
       this.axios({
           url:'http://127.0.0.1:8000/app01/book/',
           method:"get",
           params:{"id":this.id}
       }).then(res=>{
            this.books=res.data.data.data;
            this.page=res.data.data.page;
            this.previous=res.data.data.previous;
            this.next=res.data.data.next;
       })
   },
   methods:{
       pagx:function(p){
           this.p=p; 
            this.axios({
                url:'http://127.0.0.1:8000/app01/book/',
                method:'get',
                params:{"p":this.p,"id":this.id}
            }).then(res=>{
                this.authors=res.data.data.data;
                this.page=res.data.data.page;
                this.previous=res.data.data.previous;
                this.next=res.data.data.next;
            })
       }
   }
 }
</script>

<style>
table{
    margin: 0 auto;
}
 
</style>
